<template>
  <el-dialog
    v-model="show"
    title="产品属性值高级配置"
    width="800px"
    @close="closeModal"
  >
    <el-form :model="form" label-width="80px" inline>
      <el-form-item label="当前属性">
        <el-input
          v-model="form.presentAttr"
          placeholder="请输入字段名称"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="前置属性">
        <el-select
          style="width: 100px"
          v-model="form.prefixAttr"
          placeholder="请选择前置属性"
        >
          <el-option
            v-for="item in prefixAttrList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联动类型">
        <el-radio-group v-model="form.linkage">
          <el-radio value="手动输入金额" name="linkage">手动输入金额</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="[]"
      style="width: 100%"
      height="400"
      class="custom-table"
    >
      <el-table-column label="序号" props="number"> </el-table-column>
      <el-table-column label="前置属性值" props="prefixAttr"> </el-table-column>
      <el-table-column label="当前属性值" props="presentAttr">
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeModal">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { onMounted, reactive, toRef, toRefs, watch } from "vue";
import { errMsg } from "@/utils/errorMsg";

defineOptions({
  name: "CalcEditModal",
});
const props = defineProps({
  open: {
    type: Boolean,
    required: true,
  },
  data: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(["closeModal", "reload"]);

let prefixAttrList = ref([]);
const state = reactive({
  form: {
    presentAttr: "",
    prefixAttr: "无",
    linkage: `1`,
    formula: "",
  },
});

const { form } = toRefs(state);
watch(
  () => props.open,
  (val) => {
    show.value = val;
    form.value = Object.assign({}, props.data);
    prefixAttrList.value = [
      "客户名称",
      "子客户",
      "工艺厚度",
      "门体总高",
      "门体总宽",
      "主门高度",
      "主门高度",
      "墙体厚度",
      "开向",
      "包边名称",
      "气窗款式",
      "气窗工艺",
    ];
    prefixAttrList.value.unshift("无");
    console.log("form", form.value);
  }
);
const show = ref(false);

function closeModal() {
  show.value = false;
  emits("closeModal");
}

function handleConfirm() {
  try {
    // 接口请求
    if (props.isUpdate) {
      ElMessage.success("修改成功");
      emits("reload", form.value, true);
    } else {
      ElMessage.success("新增成功");
      emits("reload", form.value, false);
    }
    // emits('reload', form.value)
  } catch (error) {
    console.error("未知错误", error);
    // 请求失败处理
    ElMessage.error("修改失败：" + errMsg(error));
  }
  closeModal();
}
</script>
<style lang="scss" scoped>
.custom-table {
  --el-table-border: 1px solid #ccc;
  --el-table-border-color: #ccc;
}
</style>